<template>
  <picker
    mode="multiSelector"
    :range="multiArray"
    :value="multiIndex"
    @change="bindMultiPickerChange"
    @columnchange="bindMultiPickerColumnChange"
  >
    <slot>
      <view class="picker">
        {{ selectedAddress || placeholder }}
      </view>
    </slot>
  </picker>
</template>

<script>
export default {
  props: {
		placeholder: {
		  type: String,
		  default: '请选择省市区'
		}
  },
  data() {
    return {
      multiArray: [[], [], []], // 省市区三级数据
      multiIndex: [0, 0, 0], // 当前选中的索引
      provinces: [], // 省份数据
      cities: [], // 城市数据
      areas: [], // 区县数据
      selectedAddress: '' // 选中的地址
    }
  },
  mounted() {
    this.getProvinceData()
  },
  methods: {
    // 获取省份数据
    async getProvinceData() {
      try {
        // 替换为你的实际API接口
        const res = await uni.request({
          url: getApp().globalData.host +'/api/Login/getProvincelist',
          method: 'POST'
        })
        this.provinces = res.data.data.list || []
		this.provinces[0]['name'] = '请选择地区'
        this.multiArray[0] = this.provinces.map(item => item.name)
        
        // 默认加载第一个省份下的城市
        if (this.provinces.length > 0) {
          this.getCityData(this.provinces[0].adcode)
        }
      } catch (error) {
        console.error('获取省份数据失败:', error)
        uni.showToast({
          title: '获取省份数据失败',
          icon: 'none'
        })
      }
    },
    
    // 获取城市数据
    async getCityData(provinceCode) {
      try {
        const res = await uni.request({
          url: getApp().globalData.host +'/api/Login/getCitylist',
          method: 'POST',
		  data:{
			  adcode:provinceCode
		  }
        })
        
        this.cities = res.data.data.list || []
        this.multiArray[1] = this.cities.map(item => item.name)
        
        // 重置区县数据
        this.multiArray[2] = []
        this.areas = []
        this.multiIndex = [this.multiIndex[0], 0, 0]
        
        // 默认加载第一个城市下的区县
        if (this.cities.length > 0) {
          this.getAreaData(this.cities[0].adcode)
        }
      } catch (error) {
        console.error('获取城市数据失败:', error)
        uni.showToast({
          title: '获取城市数据失败',
          icon: 'none'
        })
      }
    },
    
    // 获取区县数据
    async getAreaData(cityCode) {
      try {
        const res = await uni.request({
          url: getApp().globalData.host +'/api/Login/getArealist',
          method: 'POST',
		  data:{
		  		adcode:cityCode
		  }
        })
        
        this.areas = res.data.data.list || []
        this.multiArray[2] = this.areas.map(item => item.name)
        
        // 更新picker数据
        this.$forceUpdate()
      } catch (error) {
        console.error('获取区县数据失败:', error)
        uni.showToast({
          title: '获取区县数据失败',
          icon: 'none'
        })
      }
    },
    
    // 列变化时触发
    bindMultiPickerColumnChange(e) {
      const { column, value } = e.detail
      
      // 更新当前选中索引
      this.multiIndex[column] = value
      
      if (column === 0) { // 省份变化
        const provinceCode = this.provinces[value].adcode
        this.getCityData(provinceCode)
      } else if (column === 1) { // 城市变化
        const cityCode = this.cities[value].adcode
        this.getAreaData(cityCode)
      }
      
      // 更新picker显示
      this.$forceUpdate()
    },
    
    // 确定选择时触发
    bindMultiPickerChange(e) {
      const values = e.detail.value
      const province = this.provinces[values[0]]
      const city = this.cities[values[1]]
      const area = this.areas[values[2]]
      
      if (province && city && area) {
        this.selectedAddress = `${province.name} ${city.name} ${area.name}`
		//this.selectedAddress = `${area.name}`
        // 这里可以获取完整的地址编码
        const fullCode = {
          provinceCode: province.adcode,
          cityCode: city.adcode,
          areaCode: area.adcode
        }
        console.log('选中的地址编码:', fullCode)
        // 触发自定义事件，如果需要
        this.$emit('addressChange', {
		  multiIndex:this.multiIndex,	
          names: this.selectedAddress,
          codes: fullCode
        })
      }else{
		 this.selectedAddress = '请选择地区'
		 this.$emit('addressChange', {
		   names: this.selectedAddress,
		   codes: ''
		 }) 
	  }
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}

.picker-item {
  margin-bottom: 20px;
}

.picker {
  padding-left: 0rpx ;
  border: 0px solid #eee;
  border-radius: 0px;
  color: #666;
  font-size: 24rpx;
  margin-top: 0px;
}
</style>